<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.css" />
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			img {
				width: 100%;
			}

			p {
				text-indent: 2em;
				padding: 0px 10px;
			}

			body {
				background-color: #ffff;
			}
		</style>

	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">标题</h1>
		</header>
		<div class="mui-content">
			<div class="mui-scroll-wrapper" style="margin-top: 44px;margin-bottom: 51px;">
				<div class="mui-scroll">
					<!--这里放置真实显示的DOM内容-->


					<div class="news">

					</div>


					<div class="replay" name='replay'>
						<div id="replay-area" style="margin: 20px 0 10px 20px;">
							<h3>评论区</h3>
						</div>

						<ul id='replay-ul' class="mui-table-view">
							<!-- <li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
									<div class="mui-media-body">
										幸福

									</div>
								</a>
							</li>
 -->
						</ul>
					</div>


				</div>
			</div>

		</div>

		<nav class="mui-bar mui-bar-tab" style="display: flex;justify-content: space-between;padding: 5px 5px;">

			<div class="input">
				<input id='pinglun' type="text" placeholder="写评论" />
			</div>

			<div class="btn">
				<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined mybtn">发布</button>
			</div>



		</nav>






	</body>
	<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/myurl.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		(function($) {
			$(".mui-scroll-wrapper").scroll({
				//bounce: false,//滚动条是否有弹力默认是true
				//indicators: false, //是否显示滚动条,默认是true
			});
		})(mui);

		function GetQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
			var context = "";
			if (r != null)
				context = r[2];
			reg = null;
			r = null;
			return context == null || context == "" || context == "undefined" ? "" : context;
		}
		
		$.post(myurl + GetQueryString('path'), {
			id: GetQueryString('id')
		}, (data) => {

			$('.news').html(data.content)
			$('.mui-title').text(data.title)
			
			$.post(myurl+'/user/setMessage',data)
		})



		const data = {
			id: GetQueryString('id'),
			path: GetQueryString('path')

		}
		
		$.get(myurl + '/user/getText', data, function(res) {
			
			let htmlStr = ''
			res.forEach(item => {
				htmlStr += `
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" >
						<img class="mui-media-object mui-pull-left" style="border-radius: 50%;overflow: hidden;"  src="/uploads/${item.imgUrl}" onerror="this.src='../img/img_head_default.png'">
						<div class="mui-media-body">
							${item.userid}
				<p class='mui-ellipsis'>${item.text}</p>
						</div>
					</a>
				</li>
				
				
				`

				$('#replay-ul').html(htmlStr)
			})
		})

		mui('.mybtn')[0].addEventListener('tap', function() {
			const message = document.getElementById('pinglun').value.replaceAll('<', '&lt;')
			const ul = document.getElementById('replay-ul')

			if (GetQueryString('userid')!='null') {
				if (message != '') {
					const li = document.createElement('li')
					li.className = 'mui-table-view-cell mui-media'
					li.innerHTML = `<a href="javascript:;">
					 		<img class="mui-media-object mui-pull-left" src="../uploads/${GetQueryString('userid')}.png" onerror="this.src='../img/img_head_default.png'">
								<div class="mui-media-body">
								${GetQueryString('userid')}
									<p class='mui-ellipsis'>${message}</p>
					
								</div>
							</a>`

					ul.insertBefore(li, ul.childNodes[0])
					const data = {
						userid: GetQueryString('userid'),
						id: GetQueryString('id'),
						path: GetQueryString('path'),
						text: message,
						imgUrl: GetQueryString('userid') + '.png'

					}
					$.get(myurl + '/user/setText', data, function(res) {
					})
					mui.alert('发布评论成功',function(){
						mui('#pinglun')[0].value=''
					})

				}


			} else {
				mui.confirm('请登录后在评论', function(e) {
					if (e.index == 0) {
						parent.location.href = 'login.html'
					}
				})
			}

		})
	</script>
</html>
